<template>
	<view class="page container">
		<view class="hdbg">
			<image src="https://api.henanjslm.com/assets/img/hdbg.png" mode=""></image>
		</view>
		<u-navbar placeholder :bgColor="fixed?'#a70909':'rgba(222,255,255,0)' ">
			<view slot="left" class="flex-center-center">
				<image src="/static/newVer/title.png" class="h-72" mode="heightFix"></image>
				<!-- <image src="/static/logo.png" class="w-60 h-60 mr-16"></image>
        <image
          src="/static/home/home-navbar-title.png"
          class="h-70"
          mode="heightFix"
        ></image> -->
			</view>
		</u-navbar>
		<view class="pt-16 flex-between-center ">
			<view class="search-container flex-between-center">
				<view class="select-box flex-between-center">
					<uni-data-select class="w-110" v-model="selectValue" :localdata="range"
						@change="selectChange"></uni-data-select>
					<view style="margin-left: -10rpx">
						<u-icon name="arrow-down" size="30rpx"></u-icon>
					</view>
				</view>
				<u-search bgColor="#fff" height="68rpx" shape="square" :showAction="false"
					placeholder="请输入烟酒门店/酒厂/产品名称关键字" v-model="keyword" @search="onSearch"></u-search>
			</view>
		</view>
		<view class="pt-32 pb-32">
			<u-swiper keyName="image" indicatorMode="dot" indicator :list="bannerList" height="320rpx" radius="12rpx"
				indicatorInactiveColor="#fff" indicatorActiveColor="#C5261D" @click="clickBanner"></u-swiper>
		</view>
		<!-- <view class="notice bgc-f7f8fa br-12">
      <image
        src="/static/home/zxdt-text.svg"
        class="w-60 h-52"
        style="min-width: 60rpx"
      ></image>
      <view class="w-4 h-32 line ml-10 mr-10"></view>
      <u-notice-bar
        direction="column"
        icon=" "
        color="#1C1714"
        bgColor="transparent"
        :text="notice_text"
        @click="clickNotice"
      ></u-notice-bar>
      <view><u-icon name="arrow-right"></u-icon></view>
    </view> -->
		<view class=" pad-32 br-12 flex-between-center flex-wrap">
			<view class="flex-column flex-column-center " v-for="(btn,n) in home_btns" :key="btn.name"
				:style="n==3?'width: 100rpx; white-space: nowrap;':''" @click="goPage(btn)">
				<image :src="btn.icon" class="w-96 h-96"></image>
				<text class="mt-16  fs-28 fw-500" style="color: #3D3D3D;">{{ btn.name }}</text>
			</view>
		</view>
		<view class=" pad-32 br-12 flex-between-center flex-wrap " style="padding-top: 0;">
			<view class="flex-column flex-column-center " v-for="btn in home_btn2" :key="btn.name" @click="goPage(btn)">
				<image :src="btn.icon" class="w-96 h-96"></image>
				<text class="mt-16 fs-28 " style="color: #3D3D3D;">{{ btn.name }}</text>
			</view>
		</view>
		
		<view class="onlinePrice">
			<view class="online-title">
				今日酒价
			</view>
			<view class="onlineHeader">
				<view class="" style="flex: 1;">
					产品名称/参数
				</view>
				<view class="" style="width: 190rpx;">
					规格
				</view>
				<view class="" style="width: 128rpx;">
					今日行情
				</view>
			</view>
			<scroll></scroll>
		</view>
		<!-- <u-tabs
      :list="tabsList"
      @click="tabClick"
      lineColor="#C5261D"
      :activeStyle="{ fontWeight: 500, color: '#000' }"
    ></u-tabs>
    <view class="pt-28">
      <swiper class="swiper" autoplay>
        <swiper-item v-for="(bannerInfo, index) in bannerList2" :key="index">
          <view class="banner-box" @click="clickBanner(bannerInfo)">
            
            <image :src="bannerInfo.image"></image>
          </view>
        </swiper-item>
      </swiper>
    </view> -->
		<view class="factory-list">
			<!-- <block>
        <view
          class="factory-item pt-32 pb-32"
          v-for="(item, index) in recommendFactoryList"
          :key="index"
        >
          <factory-card
            :info="item"
            @see_num_plus="see_num_plus('factory', index)"
          ></factory-card>
        </view>
      </block> -->
			<!-- <block v-else-if="tabsActive == 1">
        <view
          class="factory-item pt-32 pb-32"
          v-for="(item, index) in recommendStoreList"
          :key="index"
        >
          <store-card
            :info="item"
            @see_num_plus="see_num_plus('store', index)"
          ></store-card>
        </view>
      </block> -->
		</view>
		<view class="newsdata">
			<view class="dongtai-title">
				酒协动态
			</view>
			<navigator url="/pages/news/index" hover-class="none" class="">
				+查看更多
			</navigator>
		</view>

		<view v-for="(i,n) in dtList" :key="i.id" class="dtdata bgc-fff" @click="$utils.to(`/pages/information/information_detail?id=${i.id}`);">
			<view class="" style="flex:1">
				<view class="clamp2">
					{{i.title}}
				</view>
				<!-- <view class="watch">
					<image class="eye" src="/static/newVer/eye.png" mode="aspectFit"></image>
					浏览{{i.see_num}}次
				</view> -->
			</view>
			<image src="/static/news.png" mode=""></image>
		</view>
		<view class="newstab">
			<view :class="tab==0?'dongtai-title ':'' " @click="changeNewTab(0)">
				精彩资讯
			</view>
			<view :class="tab==1?'dongtai-title ':'' " @click="changeNewTab(1)">
				市场行情
			</view>
			<view :class="tab==2?'dongtai-title ':'' " @click="changeNewTab(2)">
				行业动态
			</view>
		</view>
		<view v-for="(i,n) in noticeList" :key="i.id" class="dtdata bgc-fff" @click="$utils.to(`/pages2/information/information_detail?id=${i.id}`);">
			<view class="" style="flex:1">
				<view class="clamp2">
					{{i.title}}
				</view>
				<view class="watch">
					<image class="eye" src="/static/newVer/eye.png" mode="aspectFit"></image>
					浏览{{i.see_num}}次
				</view>
			</view>
			<image :src="i.image" mode=""></image>
		</view>
		<view class="suggest mt-25">
			<view class="suggest-title">
				<text class="mr-8">推荐产品</text> 值得买的东西都在这里
			</view>
			<scroll-view scroll-x="true" height="180" style="overflow-y: hidden;white-space: nowrap;">
				<navigator :url="'/pages2/store/goods_detail?id='+i.id" hover-class="none" class="suggest-item" v-for="(i,n) in dataList" :key="n"  >
					<image :src="i.image" mode="aspectFit"></image>
					<view class="" style="width: 260rpx;">
						<u-text  :lines="1" size="30rpx" color="#262624" :text="i.title || ''"></u-text>
						<!-- <u-text></u-text> -->
						
					</view>
					<view class="pricebox">
						<text class="price">￥{{i.price}}</text>起
					</view>
				</navigator>
			</scroll-view>
		</view>
		<!-- <view class="" style="height: 140rpx;">

		</view> -->
		<!-- 推荐产品 -->
		<!-- <view class="flex-column-center mt-28">
      <image src="/static/svg/hot.svg" class="w-40 h-40 mr-8"></image>
      <text class="fs-36 fw-600">推荐产品</text>
    </view>
    <view class="pt-28">
      <swiper class="swiper" autoplay>
        <swiper-item v-for="(bannerInfo, index) in bannerList3" :key="index">
          <view class="banner-box" @click="clickBanner(bannerInfo)">
            
            <image :src="bannerInfo.image"></image>
          </view>
        </swiper-item>
      </swiper>
    </view> -->
		<!-- <view class="goods-list">
      <z-paging
        :use-page-scroll="true"
        :refresher-enabled="false"
        :default-page-size="10"
        ref="pagingRef"
        v-model="dataList"
        @query="queryList"
      >
        <view
          class="goods-item pt-32 pb-32"
          v-for="item in dataList"
          :key="item.id"
        >
          <goods-card :info="item"></goods-card>
        </view>
      </z-paging>
    </view> -->
	</view>
</template>

<script>
	import {
		newsListApi,
		bannerListApi,
		factoryListApi,
		storeListApi,
		productListApi,
		pay,
		products,
		getWinePrice,
		getDrinkAss
	} from "@/services/home.js";
	import FactoryCard from "@/components/rowCards/FactoryCard";
	import StoreCard from "@/components/rowCards/StoreCard";
	import GoodsCard from "@/components/rowCards/GoodsCard";
	import scroll from "./scroll.vue";
	export default {
		data() {
			return {
				keyword: "",
				selectValue: "zdd",
				range: [{
						value: "zdd",
						text: "终端店"
					},
					{
						value: "jc",
						text: "酒厂"
					},
					{
						value: "js",
						text: "酒商"
					},
					{
						value: "goods",
						text: "酒产品"
					},
				],
				recommendFactoryList: [],
				recommendStoreList: [],
				tabsActive: 0,
				tabsList: [{
						name: "推荐酒厂",
					},
					{
						name: "推荐酒商",
					},
				],
				notice_text: [],
				noticeList: [],
				home_btn2: [{
						icon: "/static/newVer/grid5.png",
						name: "烟酒店注册",
						page_type: "",
						page_url: "/pages2/my/apply_enter_member",
					},
					{
						icon: "/static/newVer/grid6.png",
						name: "酒商注册",
						page_type: "",
						page_url: "/pages2/my/apply_enter_factory",
					},
					{
						icon: "/static/newVer/grid7.png",
						name: "酒厂注册",
						page_type: "",
						page_url: "/pages2/my/apply_enter_factory",
					},
					{
						icon: "/static/newVer/grid8.png",
						name: "酒商联盟",
						page_url: "/pages2/home/vintners_union",
						
					},
				],
				home_btns: [{
						icon: "/static/newVer/grid1.png",
						name: "烟酒店",
						page_type: "tabbar",
						page_url: "/pages/store/store",
					},
					{
						icon: "/static/newVer/grid2.png",
						name: "酒商",
						page_type: "tabbar",
						page_url: "/pages/factory/factory",
					},
					{
						icon: "/static/newVer/grid3.png",
						name: "酒厂",
						page_type: "tabbar",
						page_url: "/pages/factory/factory",
					},
					{
						icon: "/static/newVer/grid4.png",
						name: "积分商城",
						page_url: "/pages/scoreList/index",
						page_type:"tabbar"
					},

				],
				bannerList: [],
				bannerList2: [],
				bannerList3: [],
				dataList: [],
				fixed: false,
				suggestLst: [{

				}],
				tab: 0,

				translateY: 0,
				animationId: null,
				itemHeight: 37, // 每个项目的高度
				scrollSpeed: 1, // 滚动速度
				lastTime: 0,
				dtList: [],
				onLinePriceList: [],
				onlineList: []
			};
		},
		components: {
			FactoryCard,
			StoreCard,
			GoodsCard,
			scroll
		},
		onLoad() {
			this.getNewsList();
			this.getBannerList();
			// this.getDtList()
			this.getRecommendFactoryList();
			const token = uni.getStorageSync("token");
			if (token) {
				uni.getLocation({
					type: "wgs84",
					success: (res) => {
						this.$store.commit("setLocationInfo", {
							lat: res.latitude,
							lng: res.longitude,
						});
					},
					fail: (err) => {
						console.log("获取失败", err);
					},
				});
			}
			productListApi({
				page:1,
				page_size:5,
				is_recommend: 1,
			}).then((res) => {
				console.log(res)
				this.dataList =res.data.data
			});
			getDrinkAss().then(res=>{
				console.log(res)
					this.dtList = res.data || [];
			})
		},
		onPageScroll: function(data) {

			this.fixed = data.scrollTop > 50 ? true : false
		},
		mounted() {
			// this.startScroll()
		},
		beforeDestroy() {
			// this.stopScroll()
		},
		methods: {
			paybtn(){
					pay().then(res=>{
						console.log(res)
						uni.requestPayment({
							provider:"wxpay",
							...res,
							   success: (res) => {
								   console.log(res)
							   }
						})
					})
			},
			startScroll() {
				this.lastTime = performance.now()
				const animate = (time) => {
					const delta = time - this.lastTime
					this.lastTime = time

					// 根据时间差计算移动距离，保证不同帧率下速度一致
					this.translateY -= this.scrollSpeed * (delta / 16)

					// 当滚动到复制的数据部分时，立即重置位置实现无缝衔接
					if (Math.abs(this.translateY) >= 10 * this.itemHeight) {
						this.translateY = 0
					}

					// this.animationId = wx.requestAnimationFrame(animate)
				}
				// this.animationId =  wx.requestAnimationFrame(animate)
			},
			stopScroll() {
				if (this.animationId) {
					cancelAnimationFrame(this.animationId)
					this.animationId = null
				}
			},
			see_num_plus(type, index) {
				switch (type) {
					case "factory":
						this.$set(
							this.recommendFactoryList[index],
							"see_num",
							this.recommendFactoryList[index].see_num + 1
						);
						break;
					case "store":
						this.$set(
							this.recommendStoreList[index],
							"see_num",
							this.recommendStoreList[index].see_num + 1
						);
						break;
					default:
						break;
				}
			},
			selectChange(e) {
				console.log(e);
			},
			tabClick(e) {
				this.tabsActive = e.index;
				this.getRecommendFactoryList();
			},
			getRecommendFactoryList() {
				// if (this.tabsActive == 0) {
				// if (this.recommendFactoryList.length > 0) return;
				factoryListApi({
					page: 1,
					page_size: 999,
					is_recommend: 1,
					type: this.tabsActive == 0 ? 1 : 0,
				}).then((res) => {
					this.recommendFactoryList = res.data?.data || [];
				});
				// }
				// if (this.tabsActive == 1) {
				//   if (this.recommendStoreList.length > 0) return;
				//   storeListApi({
				//     page: 1,
				//     page_size: 999,
				//     is_recommend: 1,
				//   }).then((res) => {
				//     this.recommendStoreList = res.data?.data || [];
				//   });
				// }
			},
			clickNotice(index) {
				const id = this.noticeList[index]?.id || "";
				if (!id) return;
				this.$utils.to(`/pages2/information/information_detail?id=${id}`);
			},
			clickBanner(index) {
				const bannerInfo = this.bannerList[index] || {};
				const {
					jump_type,
					jump_url
				} = bannerInfo || {};
				if (!jump_url || !jump_type) return;
				if (jump_type === "norml") {
					this.$utils.to(jump_url);
				} else {
					this.$utils.switchTab(jump_url);
				}
			},
			getBannerList() {
				bannerListApi({
					position: 0
				}).then((res) => {
					this.bannerList = res.data?.banner_list || [];
				});
				bannerListApi({
					position: 2
				}).then((res) => {
					this.bannerList2 = res.data?.banner_list || [];
				});
				bannerListApi({
					position: 3
				}).then((res) => {
					this.bannerList3 = res.data?.banner_list || [];
				});
			},
			getDtList() {
				let vm = this
				// newsListApi({
				// 	cate_pid: "1",
				// 	cate_id: "",
				// 	page: 1,
				// 	page_size: 5
				// }).then((res) => {
				// 	this.dtList = res.data?.data || [];

				// });
				getWinePrice().then(res=>{
					console.log(res)
					this.onLinePriceList=res.data
				})
				
			},
			changeNewTab(index) {
				this.tab = index;
				this.getNewsList()
			},
			getNewsList() {
				let form = this.tab == 0 ? {
					is_recommend: 1
				} : this.tab == 1 ? {
					cate_pid: "3",
					cate_id: "",
					page: 1,
					page_size: 5
				} : {
					cate_pid: "1",
					cate_id: "",
					page: 1,
					page_size: 5
				}

				newsListApi(form).then((res) => {
					this.noticeList = res.data?.data || [];
					this.notice_text = res.data?.data?.map((item) => item.title) || [];
				});
			},
			goPage(btn) {
				const {
					page_type,
					page_url
				} = btn;
				if (page_type === "tabbar") {
					this.$utils.switchTab(page_url);
				} else {
					this.$utils.to(page_url);
				}
			},
			queryList(page, page_size) {
			
			},
			onSearch() {
				if (!this.keyword) {
					this.$utils.toast("请输入关键字");
					return;
				}
				switch (this.selectValue) {
					case "zdd":
						this.$store.commit("setSearchInfo", {
							text: this.keyword,
							type: "zdd",
						});
						this.$utils.switchTab(`/pages/store/store`);
						break;
					case "jc":
						this.$store.commit("setSearchInfo", {
							text: this.keyword,
							type: "jc",
						});
						this.$utils.switchTab(`/pages/factory/factory`);
						break;
					case "js":
						this.$store.commit("setSearchInfo", {
							text: this.keyword,
							type: "js",
						});
						this.$utils.switchTab(`/pages/factory/factory`);
						break;
					case "goods":
						this.$store.commit("setSearchInfo", {
							text: this.keyword,
							type: "goods",
						});
						this.$utils.switchTab(`/pages/factory/factory`);
						break;
					default:
						break;
				}
			},
		},
	};
</script>

<style lang="scss" scoped>
	.page {
		background-color: #EFEFEF;
		padding: 0 28rpx;
		padding-bottom: 60rpx;

		.notice {
			/deep/.u-notice-bar {
				padding-left: 0;
				padding-right: 6rpx;
			}

			padding: 6rpx 24rpx;
			display: flex;
			align-items: center;

			.line {
				background-color: #9ca4ab;
				opacity: 0.3;
			}

			.text {
				color: #35374b;
				//最多一行，省略号
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}

		/deep/.u-tabs__wrapper__nav__item__text {
			font-size: 36rpx;
		}

		.btns2 {
			&>view {
				box-sizing: border-box;
				padding: 0 24rpx;

				.right {
					display: flex;
					flex-direction: column;
					align-items: flex-end;
				}
			}
		}

		.swiper {
			height: 240rpx;
		}

		.banner-box {
			height: 240rpx;
			// margin: 32rpx 0;
			position: relative;

			&>text {
				position: absolute;
				top: 24rpx;
				left: 24rpx;
				color: #fff;
				font-size: 28rpx;
				font-weight: 500;
				letter-spacing: 2rpx;
			}

			&>image {
				width: 100%;
				height: 240rpx;
				border-radius: 12rpx;
			}
		}
	}

	.select-box {
		/deep/.uni-select {
			border: none;
		}

		/deep/.uni-select__selector {
			width: 150rpx;
		}
	}

	.search-container {
		flex: 1;
		background-color: #fff;
		border-radius: 8rpx;
		padding: 0 16rpx;
		position: relative;

		/deep/.uni-stat-box {
			background: transparent;
			border: none;
		}

		/deep/.uni-select {
			border: none;
			background: transparent;
			padding-left: 8rpx;
		}

		/deep/.uni-select__selector {
			width: 150rpx;
		}

		/deep/.u-search {
			flex: 1;
			background: transparent;
		}
	}

	.container {
		position: relative;

		.hdbg {
			position: absolute;
			width: 100%;
			left: 0;

			image {
				width: 100%;
				height: 500rpx;
			}
		}
	}

	.suggest {
		width: 702rpx;
		height: 482rpx;
		background: linear-gradient(180deg, #FDDCBA 0%, #EFB47A 99%);
		border-radius: 12rpx;
		padding: 22rpx;
		box-sizing: border-box;
	}

	.suggest-title {
		font-weight: 400;
		font-size: 24rpx;
		color: #AD6D33;

		text {
			font-weight: 500;
			font-size: 36rpx;
			color: #6F3204;
		}
	}

	.suggest-item {
		width: 270rpx;
		// height: 360rpx;
		padding:20rpx;
		background: #FFFFFF;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		margin-right: 22rpx;
		display: inline-flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 26rpx;
		color: #3D3D3D;
		margin-top: 20rpx;

		// padding-left: 14rpx;
		// padding:22rpx;
		// box-sizing: border-box;
		image {
			width: 100%;
			height: 240rpx;
		}

		.pricebox {
			text-align: left;
			margin-left: 16rpx;
			width: 100%;

			text {
				font-weight: 700;
				font-size: 32rpx;
				color: #F83D3D;
			}
		}
	}

	.online-title {
		font-weight: 500;
		font-size: 36rpx;
		color: #FF3000;
		margin: 20rpx 0 28rpx;
		line-height: 52rpx;
	}

	.onlineHeader {
		// width: 702rpx;
		height: 74rpx;
		background: #FCEAE1;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		font-weight: 500;
		font-size: 32rpx;
		color: #333333;
		line-height: 46rpx;
		display: flex;
		align-items: center;
		padding: 0 16rpx;
		margin-bottom: 28rpx;
	}

	

	.newsdata {
		font-size: 28rpx;
		color: #999999;
		line-height: 40rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 32rpx;
		margin-top: 32rpx;

		.dongtai-title {
			font-weight: 500;
			font-size: 36rpx;
			color: #FF3000;
			line-height: 52rpx;
			position: relative;
			display: inline-block;

		}

		.dongtai-title::after {

			position: absolute;
			clear: both;
			content: '';
			position: absolute;
			left: 0;
			bottom: -10rpx;
			right: 0;
			margin: auto;
			width: 120rpx;
			height: 10rpx;
			background: linear-gradient(270deg, #FF8000 0%, #FF2D32 100%), #FF3000;
			border-radius: 0rpx 0rpx 0rpx 0rpx;
		}
	}

	.newstab {
		margin: 40rpx 0 32rpx;
		padding: 0 22rpx;
		font-weight: 500;
		font-size: 36rpx;
		color: #666666;
		line-height: 52rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.dongtai-title {
			font-weight: 500;
			font-size: 36rpx;
			color: #FF3000;
			line-height: 52rpx;
			position: relative;
			display: inline-block;

		}

		.dongtai-title::after {

			position: absolute;
			clear: both;
			content: '';
			position: absolute;
			left: 0;
			bottom: -10rpx;
			right: 0;
			margin: auto;
			width: 120rpx;
			height: 10rpx;
			background: linear-gradient(270deg, #FF8000 0%, #FF2D32 100%), #FF3000;
			border-radius: 0rpx 0rpx 0rpx 0rpx;
		}
	}

	.dtdata {
		height: 208rpx;
		background: #FFFFFF;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		width: 100%;
		box-sizing: border-box;
		box-shadow: 0rpx 7rpx 19rpx 0rpx rgba(0, 0, 0, 0.1);
		padding: 30rpx 24rpx;
		margin-top: 26rpx;
		display: flex;

		image {
			width: 180rpx;
			height: 140rpx;
			border-radius: 12rpx;
			margin-left: 24rpx;
			flex-shrink: 0;
		}

		.clamp2 {
			font-size: 32rpx;
			color: #3D3D3D;
			line-height: 46rpx;
			/* #ifdef APP-PLUS-NVUE */
			lines: 2;
			/* #endif */
			/* #ifndef APP-PLUS-NVUE */
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
			word-break: break-all;
			/* #endif */
		}

		.eye {
			width: 32rpx;
			height: 32rpx;
			margin:0;
		}

		.watch {
			display: flex;
			align-items: center;
			font-size: 28rpx;
			color: #999999;
			margin-top: 10rpx;
		}
	}
</style>
<style>
	.scrollContainer {
		max-height: 370px;
		overflow: hidden;
		position: relative;
		/* 开启硬件加速 */
		transform: translateZ(0);
	}

	.scroll-list {
		/* 提前告知浏览器会有transform变化 */
		will-change: transform;
		/* 开启硬件加速 */
		backface-visibility: hidden;
		perspective: 1000px;
	}
</style>